<template>
  <div>
    <searchBar placeHolder='请输入公司名称/负责人'
               @handleSearch='init' />
    <el-table :data="tableData">
      <el-table-column label="维修厂名称"
                       prop="company"
                       align="center"></el-table-column>
      <el-table-column label="负责人"
                       prop="leader"
                       align="center"></el-table-column>
      <el-table-column label="联系电话"
                       prop="phone"
                       align="center"></el-table-column>
      <el-table-column label="售卡数"
                       prop="card_sale_num"
                       align="center"></el-table-column>
      <el-table-column label="服务数"
                       prop="service_num"
                       align="center"></el-table-column>
      <el-table-column label="余额"
                       prop="balance"
                       align="center"></el-table-column>
      <el-table-column label="运营商"
                       align="center">
        <template slot-scope="scope">
          <el-popover ref="popover4"
                      title='详情'
                      placement="right"
                      width="400"
                      trigger="hover"
                      @show="details(scope.row)">
            <el-button slot="reference"
                       type="text">{{scope.row.a_compnay}}</el-button>
            <div v-if='detailsData'
                 v-loading='loading'
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 class="details">
              <div v-if='detailsData.list'>
                <div>
                  <span>运营商名称 : </span>
                  <span>{{detailsData.list.company}}</span>
                </div>
                <div>
                  <span>负责人 : </span>
                  <span>{{detailsData.list.leader}}</span>
                </div>
                <div>
                  <span>联系电话 : </span>
                  <span>{{detailsData.list.phone}}</span>
                </div>
                <div>
                  <span>注册时间 : </span>
                  <span>{{detailsData.list.audit_time}}</span>
                </div>
                <div>
                  <span>合作状态 : </span>
                  <span>{{detailsData.list.status | status}}</span>
                </div>
              </div>
              <div class="region"
                   v-if="detailsData.area">
                <div>
                  <span>管辖地区 :</span>
                  <span v-for="(item,index) in detailsData.area"
                        style=""
                        :key="index">
                    {{`${index+1}.${item.province}${item.city}${item.county}、`}}
                  </span>
                </div>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="店铺类型"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.shop_type==1 ? '加盟维修厂': '合作维修厂'}}
        </template>
      </el-table-column>
      <el-table-column label="取消时间"
                       prop="audit_time"
                       align="center"></el-table-column>
    </el-table>
    <v-pagination :page.sync='page'
                  :total='total'
                  @pagination='init' />
  </div>
</template>

<script> 

export default {
  data () {
    return {
      tableData: [],
      page: 1,
      total: 0,
      detailsData: {},
      loading: false
    }
  },
  filters: {
    status (e) {  //运营商状态
      return e == 0 ? '未支付' : e == 2 ? '通过地区' : e == 3 ? '已支付' : e == 4 ? '已选择地区' : e == 5 ? '驳回地区' : e == 6 ? '取消合作' : e == 7 ? '总后台关停' : e == 8 ? '投诉关停' : '空'
    }
  },
  methods: {
    async init (data) { //合作维修厂列表
      try {
        const res = await this.api.cacelShop(Object.assign({}, data, { page: this.page }))
        this.tableData = res.data.list || []
        this.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    },
    async details (row) {
      try {
        this.loading = true
        const res = await this.api.joinAgent({ aid: row.aid })
        this.detailsData = res.data || {}
        this.loading = false
      } catch (err) {
        throw (err)
      }
    }

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang='scss'>
.details {
  min-height: 200px;
  & > div {
    & > div {
      margin-top: 5px;
    }
  }
  .region {
    span {
      line-height: 23px;
    }
  }
}
</style>